Chrome DevTools দিয়ে AMP পেজ Debugging গাইড ও নোট

Chrome DevTools ব্যবহার করে AMP (Accelerated Mobile Pages) পেজের debugging করা একটি কার্যকরী পদ্ধতি, যা আপনাকে AMP পেজের লোডিং সমস্যা, কনসোলের ত্রুটি, এবং অন্যান্য ইনস্পেকশন বিষয়গুলির দ্রুত চিহ্নিত করতে সহায়তা করে। AMP পেজের নির্দিষ্ট বৈশিষ্ট্য যেমন AMP HTML, AMP JavaScript, এবং AMP উপাদানগুলির আচরণ সঠিকভাবে বুঝতে এবং সমাধান করতে Chrome DevTools খুবই কার্যকরী।

Chrome DevTools দিয়ে AMP পেজ Debugging

এখানে কিছু প্রধান ধাপ আলোচনা করা হল যা Chrome DevTools ব্যবহার করে AMP পেজ debugging করতে সহায়তা করবে:

1. AMP পেজ লোডিং ইস্যু চেক করা

AMP পেজ লোড হওয়ার সময় যদি কিছু সমস্যা থাকে, Chrome DevTools ব্যবহার করে আপনি লোডিং প্রক্রিয়া বিশ্লেষণ করতে পারেন। এটি বিশেষভাবে সাহায্য করে যদি পেজটি খুব ধীরে লোড হয় অথবা AMP কম্পোনেন্টের কোনো সমস্যা থাকে।

ধাপ:

1. DevTools খোলা:
   • আপনার Chrome ব্রাউজারে AMP পেজটি ওপেন করুন।
   • Chrome DevTools খুলতে, F12 বা Ctrl + Shift + I (Windows) অথবা Cmd + Option + I (Mac) চাপুন।
2. Network Tab ব্যবহার করা:
   • Network ট্যাবটি সিলেক্ট করুন। এটি AMP পেজের সমস্ত নেটওয়ার্ক রিকোয়েস্ট, যেমন AMP JS, AMP Cache, এবং অন্যান্য রিসোর্সগুলি দেখাবে।
   • পেজ রিফ্রেশ করুন (F5), এবং সমস্ত নেটওয়ার্ক রিকোয়েস্ট চেক করুন। যদি কোনো রিকোয়েস্ট আটকে থাকে বা সঠিকভাবে লোড না হয়, তাহলে সেগুলি চিহ্নিত করতে পারেন।
3. AMP Cache চেক করা:
   • AMP পেজ যদি গুগল AMP Cache থেকে লোড হয়, তাহলে এটি "cdn.ampproject.org" ডোমেইনে দেখতে পাবেন। ডোমেইনের রিকোয়েস্ট সঠিকভাবে চলছে কিনা, তা চেক করুন।

2. Console Tab দিয়ে AMP Errors চেক করা

AMP পেজের JavaScript এবং HTML এর কোনো সমস্যা থাকলে তা Console ট্যাবেই প্রদর্শিত হবে। AMP পেজের কম্পোনেন্টের ত্রুটি, কনসোলের লোগস, এবং অন্যান্য ইনফর্মেশন এখানে দেখা যায়। এটি AMP পেজের সমস্যা চিহ্নিত করতে সাহায্য করে।

ধাপ:

1. Console ট্যাব খুলুন:
   • Chrome DevTools এ Console ট্যাবটি সিলেক্ট করুন।
   • AMP পেজের লোড হওয়া ত্রুটিগুলি এখানে দেখতে পারবেন। AMP সনাক্তকৃত ত্রুটিগুলির সাথে সম্পর্কিত ত্রুটি বার্তা এবং ওয়ার্নিং দেখাবে।
2. AMP Errors চেক করা:
   • যদি AMP পেজে কোনো কম্পোনেন্টের সমস্যা থাকে, যেমন <amp-img> বা <amp-carousel>, তাহলে কনসোলে এর সম্পর্কিত ত্রুটি দেখা যাবে। AMP পেজের সঠিক রেন্ডারিং এবং আচরণ নিশ্চিত করতে আপনাকে এই ত্রুটিগুলির সমাধান করতে হবে।
3. Console ত্রুটির উদাহরণ:

   • উদাহরণস্বরূপ, আপনি যদি একটি <amp-img> ট্যাগে একটি ভুল src পাথ দেন, তখন Console এ এই ধরনের ত্রুটি বার্তা দেখতে পারবেন:

     AMP Validator: Failed to find AMP image resource (invalid src).

3. AMP HTML Validator ব্যবহার করা

Chrome DevTools এর AMP Validator পেজের HTML এবং AMP কম্পোনেন্টের বৈধতা চেক করতে সহায়তা করে। এটি AMP পেজে কোনো ভুল HTML বা AMP এর নির্দিষ্ট কনফিগারেশন ভুল রয়েছে কিনা তা দ্রুত খুঁজে বের করতে সাহায্য করে।

ধাপ:

1. AMP Validator চালানো:
   • Chrome DevTools এ Console ট্যাব ব্যবহার করতে পারেন, যেখানে AMP পেজের জন্য AMP Validator রিপোর্ট দেখা যাবে।
   • আপনি একটি AMP পেজ URL অ্যাড করে AMP Validator চালাতে পারেন এবং AMP পেজের বৈধতা পরীক্ষা করতে পারেন।
2. AMP Validation Errors দেখুন:
   • AMP পেজের ত্রুটি গুলি চিহ্নিত করার জন্য AMP Validator চালিয়ে দেখতে পারেন। যদি পেজটি AMP Invalid হয়, তাহলে এটি কনসোলের মধ্যে প্রদর্শিত হবে এবং AMP Validator ত্রুটি বার্তা দিবে।

4. AMP JS এবং CSS সমস্যাগুলি ডিবাগ করা

AMP পেজের ক্ষেত্রে যদি কোনো AMP JavaScript বা CSS সমস্যা থাকে, তাহলে Sources এবং Styles ট্যাব ব্যবহার করে এগুলি ডিবাগ করা সম্ভব।

ধাপ:

1. Sources Tab:
   • Sources ট্যাবটি ব্যবহার করে AMP JS ফাইলগুলির মধ্যে প্রবেশ করুন এবং এটি সঠিকভাবে লোড হচ্ছে কিনা তা পরীক্ষা করুন। আপনি AMP JavaScript এর কোড পর্যবেক্ষণ করতে পারেন এবং কোড লাইনে সমস্যা চিহ্নিত করতে পারেন।
2. Styles Tab:
   • Styles ট্যাবটি ব্যবহার করে AMP পেজে ব্যবহৃত স্টাইল এবং CSS প্রোপার্টি চেক করুন। নিশ্চিত করুন যে CSS ফাইলগুলি AMP এর স্টাইল কনভেনশন অনুসরণ করছে এবং স্টাইলস লোড হচ্ছে।

5. AMP HTML সঠিকতা চেক করা

AMP পেজের HTML কনফিগারেশন সঠিক কিনা তা নিশ্চিত করার জন্য AMP HTML সঠিকতা চেক করা দরকার। আপনি AMP HTML Validator বা Chrome DevTools এর Elements Tab ব্যবহার করে HTML এ কোনো ভুল চিহ্নিত করতে পারেন।

ধাপ:

1. Elements Tab:
   • Elements ট্যাবের মাধ্যমে AMP পেজের DOM (Document Object Model) চেক করুন। আপনি সঠিক AMP কম্পোনেন্টের উপস্থিতি দেখতে পাবেন, যেমন <amp-img>, <amp-carousel>, <amp-form> ইত্যাদি।
2. AMP Validator:
   • আপনি Chrome DevTools এর AMP Validator ব্যবহার করে HTML সঠিকতা চেক করতে পারেন। এটি আপনাকে HTML পেজের ত্রুটি এবং অন্যান্য AMP সম্পর্কিত সমস্যা চিহ্নিত করতে সাহায্য করবে।

উপসংহার

Chrome DevTools ব্যবহার করে AMP পেজের debugging একটি শক্তিশালী এবং কার্যকরী পদ্ধতি, যা আপনাকে AMP কম্পোনেন্টের সমস্যা, কনসোল ত্রুটি, HTML এবং JavaScript এর সমস্যা দ্রুত চিহ্নিত করতে সহায়তা করে। Network, Console, Sources, এবং AMP Validator টুলস ব্যবহার করে আপনি AMP পেজের লোডিং, ত্রুটি, এবং পারফরম্যান্স ইস্যুগুলি চিহ্নিত করতে পারেন এবং তা সমাধান করতে পারেন।